<!--订单列表-->
<template>
  <div class="dashboard-container">
    <el-form ref="form" :inline="true" :model="searchForm" label-width="80px">
      <el-form-item label="搜索">
        <el-input v-model="searchForm.keyword" placeholder="请输入订单号|微信号|姓名"></el-input>
      </el-form-item>
      
      <el-button type="primary" @click="submitSearchForm">立即搜索</el-button>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list.list"
      element-loading-text="Loading"
      border
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            :data="props.row.basicinfo"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            :header-cell-style="{background:'#F56C6C',color:'#fff'}"
          >
             <el-table-column type="expand">
               <template slot-scope="props2">
                 <el-table
                  :data="props2.row.sub_order"
                  element-loading-text="Loading"
                  border
                  fit
                  highlight-current-row
                  :header-cell-style="{background:'#E6A23C',color:'#fff'}"
                >
                  <el-table-column label="保险名称" align="center" prop="name"></el-table-column>
                  <el-table-column label="类型" align="center" prop="type"></el-table-column>
                  <el-table-column label="保险期限" align="center" prop="bz_year"></el-table-column>
                  <el-table-column label="总额度" align="center" prop="total"></el-table-column>
                  <el-table-column label="缴费方式" align="center" prop="feetype"></el-table-column>
                  <el-table-column label="购买情况" align="center">
                    <template slot-scope="props2">{{ props2.row.status == 0 ? "未购买":"已购买" }}</template>
                  </el-table-column>
                  <el-table-column label="购买链接" align="center" prop="buy_url">
                    <template slot-scope="props2">
                      <el-tooltip :content="props2.row.buy_url" placement="top">
                        <a :href="props2.row.buy_url" target="_blank" rel="noopener noreferrer">链接</a>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" align="center" prop="desc"></el-table-column>
                  <el-table-column label="操作" align="center" width="120">
                    <template slot-scope="props2">
                      <el-button type="text" @click="modifyClick(props2.row)" size="small">修改</el-button>
                      <el-button type="text" @click="del(props2.row.id)" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                 </el-table>
               </template>
             </el-table-column>
            <el-table-column label="关系" prop="guanxi"></el-table-column>
            <el-table-column label="职业">
              <template slot-scope="scope">{{ scope.row.zhiye | zhiyeFilter}}</template>
            </el-table-column>
            <el-table-column label="病史">
              <template slot-scope="scope">{{ scope.row.bingshi | binshiFilter}}</template>
            </el-table-column>
            <el-table-column label="年总收入" prop="shouru"></el-table-column>
            <el-table-column label="社保">
              <template slot-scope="scope">{{ scope.row.baozhang == '0' ? '无':'有'}}</template>
            </el-table-column>
            <el-table-column label="出差">
              <template slot-scope="scope">{{ scope.row.chuchai == '0' ? '无':'有'}}</template>
            </el-table-column>
            <el-table-column label="驾车">
              <template slot-scope="scope">{{ scope.row.chuxing == '0' ? '无':'有'}}</template>
            </el-table-column>
            <el-table-column label="生日" prop="shengri"></el-table-column>
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button type="text" @click="editClick(scope.row)" size="small">添加购买信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="order.id" width="80" align="center"></el-table-column>
      <el-table-column label="姓名" prop="pinfo[0].name" width="120" align="center"></el-table-column>
      <el-table-column label="性别" prop="pinfo[0].sex" width="80" align="center">
        <template slot-scope="scope">{{ scope.row.pinfo[0].sex == '0' ? '男':'女'}}</template>
      </el-table-column>
      <el-table-column label="电话" prop="pinfo[0].phone"></el-table-column>
      <el-table-column label="微信名" prop="wxinfo[0].nickname"></el-table-column>
      <el-table-column label="产品类型" prop="chanpininfo[0].mingcheng"></el-table-column>
      <el-table-column label="是否付款">
        <template slot-scope="scope">
          <span v-if="scope.row.order.pay_status == '0'">未付款</span>
          <span v-if="scope.row.order.pay_status == '1'">付款中</span>
          <span v-if="scope.row.order.pay_status == '2'">已付款</span>
          <span v-if="scope.row.order.pay_status == '3'">付款失败</span>
        </template>
      </el-table-column>
      <el-table-column label="预约沟通时间" prop="order.yuyue_time"></el-table-column>
      <el-table-column label="贷款总额">
        <template slot-scope="scope">
          {{'房贷：'+scope.row.pinfo[0].house +'/'+scope.row.pinfo[0].houseyears+' 车贷：'+scope.row.pinfo[0].car +'/'+scope.row.pinfo[0].caryears}}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="order.description"></el-table-column>
      <el-table-column label="跟进状态" width="80" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="statusPop(scope.row)">{{ scope.row.order.order_status | filterStatus}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="编辑备注" width="80" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="descriptionPop(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total='Number(list.total)' @pageChange='pageChange'/>

    <el-dialog title="编辑" :visible.sync="editFormPop" width="500px">
      <el-form :model="editForm" ref="editForm" :rules="editFormRules" label-width="120px">
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入产品名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="保险类型" prop="type">
          <el-select v-model="editForm.type" placeholder="请选择保险类型">
              <el-option label="重疾险" value="重疾险"></el-option>
              <el-option label="医疗险" value="医疗险"></el-option>
              <el-option label="意外险" value="意外险"></el-option>
              <el-option label="寿险" value="寿险"></el-option>
              <el-option label="年金险" value="年金险"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缴费方式">
          <el-radio v-model="editForm.feetype" label="每年交">每年交</el-radio>
          <el-radio v-model="editForm.feetype" @click="editForm.total = 0" label="一次性交清">一次性交清</el-radio>
        </el-form-item>
        <el-form-item label="每年费用" prop="totalperyear" v-if="editForm.feetype=='每年交'">
          <el-input v-model.number="editForm.totalperyear" placeholder="请输入每年费用" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年限" prop="period" v-if="editForm.feetype=='每年交'">
          <el-input v-model.number="editForm.period" placeholder="请输入年限" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="保障年限" prop="bz_year">
          <el-input v-model="editForm.bz_year" placeholder="请输入保障年限" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="保费" prop="totalperyear" v-if="editForm.feetype!=='每年交'">
          <el-input v-model="editForm.totalperyear" placeholder="请输入保费" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总金额" prop="total">
          <el-input v-model="editForm.total" placeholder="请输入总金额" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品购买地址" prop="buy_url">
          <el-input v-model="editForm.buy_url" placeholder="请输入URL地址" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="editForm.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormPop = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit(false)">确 定</el-button>
        <el-button v-if="againShow" type="primary" @click="saveEdit(true)">继续添加</el-button>
      </div>
    </el-dialog>

    <el-dialog title="跟进状态" :visible.sync="statusFormPop" width="500px">
      <el-form :model="statusForm" ref="statusForm" label-width="120px">
        <el-form-item label="当前状态">
          <el-select v-model="statusForm.order_status" placeholder="请选择">
             <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="statusFormPop = false">取 消</el-button>
        <el-button type="primary" @click="savestatus">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="订单描述" :visible.sync="descriptionFormPop" width="500px">
      <el-form :model="descriptionForm" :rules="descriptionFormRules" ref="descriptionForm" label-width="80px">
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="descriptionForm.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="descriptionFormPop = false">取 消</el-button>
        <el-button type="primary" @click="savedescription">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderList, savesuborder, setorderstatus, saveorderdesc, delsuborder } from "@/api/chanpin";
import pagination from "@/components/page/page.vue";//分页
export default {
  data() {
    return {
      searchForm:{},
      againShow:false,
      page:0,
      listLoading: true,
      list: [],
      editFormPop:false,
      editForm:{
        feetype:"每年交"
      },
      editFormRules:{
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请输入保险类型', trigger: 'blur' },
        ],
        total: [
          { required: true, message: '请输入总金额', trigger: 'blur' },
        ],
        baofei: [
          { required: true, message: '请输入保费', trigger: 'blur' },
        ],
        period: [
          { required: true, message: '请输入年限', trigger: 'blur' },
          { type: 'number', message: '必须为数字值'}
        ],
        bz_year: [
          { required: true, message: '请输入年限', trigger: 'blur' }        ],
        totalperyear: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        buy_url: [
          { required: true, message: '请输入URL地址', trigger: 'blur' },
        ],
      },
      statusFormPop:false,
      statusForm:"",
      descriptionFormPop:false,
      descriptionForm:"",
      descriptionFormRules:{
        description:[{ required: true, message: '请输入订单描述', trigger: 'blur' },]
      },
      options:[{
        value: '0',
        label: '用户输入'
      },{
        value: '3',
        label: '沟通中'
      },{
        value: '6',
        label: '已沟通'
      },{
        value: '9',
        label: '已完成方案'
      }]
    };
  },
  components: {
    pagination
  },
  mounted() {
    this.getOrderList({ page: 0 })
  },
  methods: {
    submitSearchForm(){
      this.getOrderList({
        ...this.searchForm,
        ...this.page 
      })
    },
    getOrderList(page){
      getOrderList(page).then(res => {
        // this.page = page
        this.list = res.data;
        this.listLoading = false
      });
    },
    handleClick(row){
    },
    editClick(row){
      this.editFormPop = true
      this.editFormRow = {
        orderid:row.orderid,
        sub_member_id:row.id,
      }
      this.editForm={
        feetype:"每年交"
      }
      this.againShow = true
    },
    del(id){
      this.$confirm('是否确定删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delsuborder({id}).then(res=>{
            this.$message({
              message: res.msg,
              type: res.state
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },
    modifyClick(row){
      this.editFormPop = true
      this.editForm = JSON.parse(JSON.stringify(row))
      this.editForm.feetype = this.editForm.feetype.split(',')[0]
      this.editForm.totalperyear = Number(this.editForm.totalperyear)
      this.editForm.period = Number(this.editForm.period)
      this.againShow = false
    },
    saveEdit(again){
      if(!this.editForm.hasOwnProperty('orderid')){
        this.editForm.orderid = this.editFormRow.orderid
        this.editForm.sub_member_id = this.editFormRow.sub_member_id
      }
      
      this.$refs.editForm.validate(valid => {
        if (valid) {

          if(this.editForm.feetype == '每年交'){
            // this.editForm.total = this.editForm.totalperyear*this.editForm.period || 0
            this.editForm.feetype = `${this.editForm.feetype},缴${this.editForm.period}年`
          }

          this.loading = true
          savesuborder(this.editForm).then(res => {
            this.loading = false
            this.getOrderList(this.page)
            this.$message({
              message: res.msg,
              type: res.state
            });
            
            if(!again){
              this.editFormPop = false
            }
            this.editForm={
              feetype:"每年交"
            }
          }).catch(()=>{
            this.editForm={
              feetype:"每年交"
            }
            this.editFormPop = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    statusPop(row){
      this.statusFormPop = true
      this.statusForm = {
        orderid:row.order.id,
        order_status:row.order.order_status,
      }
    },
    savestatus(){
      setorderstatus(this.statusForm).then((res)=>{
        this.$message({
          message: res.msg,
          type: res.state
        });
        this.getOrderList(this.page)
        this.statusFormPop = false
      })
    },
    descriptionPop(row){
      this.descriptionFormPop = true
      this.descriptionForm = {
        orderid:row.order.id,
        description:row.order.description || '',
      }
    },
    savedescription(){
      this.$refs.descriptionForm.validate(valid => {
        if (valid) {
          saveorderdesc(this.descriptionForm).then((res)=>{
            this.$message({
              message: res.msg,
              type: res.state
            });
            this.getOrderList(this.page)
            this.descriptionFormPop = false
          })
        }else{
          console.log('error submit!!')
          return false
        }
      })
    },
    //分页
    pageChange(val){
      this.getOrderList({page:val})
      this.listLoading= true
    }
  },
  filters: {
    binshiFilter(status) {
      status = status.split(",");
      const bingshiArr = [
        "无",
        "心脏疾病（先天性、冠心病等）",
        "三高（高血压、高血脂、高血糖）",
        "糖尿病",
        "脂肪肝",
        "乙肝病毒携带者（大三阳，小三阳）或甲肝，丙肝",
        "中风；良性肿瘤（子宫肌瘤、纤维瘤）",
        "淋巴结节、甲状腺结节",
        "结石（胆、胆囊、肾等）",
        "息肉（肠、鼻、胆囊等）",
        "精神病（抑郁症、自闭症等）",
        "贫血",
        "胃炎（上表性胃炎，慢性萎缩性胃炎等）",
        "腰间盘突出",
        "乳腺增生、乳腺结节",
        "宫颈炎",
        "过去1年有住院或者手术",
        "其他"
      ];
      let ret = "";
      for (let i of status) {
        ret += bingshiArr[i] + ",";
      }
      ret = ret.replace(/,$/gi, "");
      return ret;
    },
    zhiyeFilter(status) {
      status = status.split(",");
      const Arr = [
        "室内轻体力（行政、管理人员）",
        "室内中体力（程序员）",
        "户外简单工作（导游、司机）",
        "户外复杂工作（工程师、建筑工人）",
        "室内制造业（装修、流水线工人）",
        "家庭主妇",
        "学生",
        "其他"
      ];
      let ret = "";
      for (let i of status) {
        ret += Arr[i] + ",";
      }
      ret = ret.replace(/,$/gi, "");
      return ret;
    },
    filterStatus(status){
      if(status==0){
        return "用户输入"
      }else if(status==3){
        return "沟通中"
      }else if(status==6){
        return "已沟通"
      }else if(status==9){
        return "已完成方案"
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>